<template>
    <div style="width:100%;height:100%;overflow-x:auto;overflow-y:hidden;">
        <div class="outside">
            <div style="width:15%;height:100%;display:flex;flex-flow:column nowrap;"  v-for="(item,index) of arr" :key="index">
                <div class="topWord">
                    <span>{{ item.topWord[0] }}</span>
                    <span>{{ item.topWord[1] }}</span>
                </div>
                <div id="bbb">
                    <div>
                        
                    </div>
                </div>
                <div class="colorBlock" :style="handleColor(item,index)"></div>
                <div class="bottomWord">{{ item.bottomWord }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            arr:[
                {
                    topWord:[0,50],
                    color:'#dcff93',
                    bottomWord:'优'
                },
                {
                    topWord:[50,100],
                    color:'#ff9b6a',
                    bottomWord:'良好'
                },
                {
                    topWord:[100,150],
                    color:'#f1b8e4',
                    bottomWord:'轻度污染'
                },
                {
                    topWord:[150,200],
                    color:'#d9b8f1',
                    bottomWord:'中度污染'
                },
                {
                    topWord:[200,300],
                    color:'#f1ccb8',
                    bottomWord:'重度污染'
                },
                {
                    topWord:[300,500],
                    color:'#b8f1ed',
                    bottomWord:'严重污染'
                },
            ],
            oldDatas:[],/* 这个是你的树状数据 */
            newArrs:[],/* 这个是处理完数据之后的新的数组 */
        };
    },
    methods:{
        handleDatas(datas){
            if(datas != undefined && datas != null && this.newArrs != undefined && this.newArrs !=undefined){
                datas.forEach(item=>{
                    if(item.children.length>0){
                        this.handleDatas(item.children);
                    }
                    this.newArrs.push(item);
                });
            }
        },
        handleColor(item,index){
            if(index==0){
                return 'border-top-left-radius:15px;border-bottom-left-radius:15px;' +'background-color:'+ item.color+';'
            }
            if(index==this.arr.length-1){
                return 'border-top-right-radius:15px;border-bottom-right-radius:15px;'+'background-color:'+ item.color+';'
            }
            return 'background-color:'+ item.color+';'
        },
        handleIf(index){
            return true
        },
    },
    mounted(){
        //this.initEcharts();
    },
    created(){
        
    }
}

</script>
<style scoped>
.outside{
    height: 60px;
    width: 800px;
    display: flex;
    flex-flow: row nowrap;
}
.topWord{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 20px;
}
.bottomWord{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
    height: 20px;
}
.colorBlock{
    width: 100%;
    height: 20px;
}
</style>